@extends('frontend/layouts/bootstrap')

@section('content')
<h2>Контейнер жагсаалт</h2>
<div id="notification"></div>
{{-- FILTER --}}
<div class="well well-small">
    <form class="form-inline" style="margin: 0;" action="{{ route('car_balance.container.index') }}" method="get">
        {{-- CONTAINER SYS ID --}}
        @include('nimo.domains.car_balance.Main._form_field', array('field'=>'container_id', 'title' => 'Container System ID', 'value' => $filter_container_id, 'class' => 'input-medium', 'type' => 'text'))

        {{-- Form::token() --}}
        {{-- BUTTONS --}}
        <button type="submit" class="btn">Apply Filter</button>
        <a href="{{ route('car_balance.container.index') }}" >Reset</a>
    </form>
</div>

@if ($containers->count())

        <table class="table table-bordered table-condensed table-hover">
            <thead style="background-color: #f0f0f0;">
            <tr>
                <th title="Container System Id." colspan="2">Container System ID.</th>
                <th title="Cars" colspan="2">Cars</th>
            </tr>
            </thead>
            <tbody style="font-size: 11px;  white-space:nowrap;">
            @foreach($containers as $container)
            {{ ''; $content_count=isset($container_contents[$container->container_id]) ? count($container_contents[$container->container_id]) : '0' }}
            @if (empty($customer))
            <tr>
                <th rowspan="{{ $content_count > 0 ? $content_count : 1 }}">{{ $container->container_id }}</th>
                <th rowspan="{{ $content_count > 0 ? $content_count : 1 }}">
                    @unless ($container->settlement_flag)
                    <a class="btn btn-mini btn-primary btn-settle" href="{{ route('car_balance.container.settle', $container->container_id) }}"><i class="icon icon-ok"></i> Mark as confirmed </a>
                    <!--<a class="btn btn-mini btn-success btn-addcar" href="#"><i class="icon icon-plus"></i> Add another car</a>-->
                    @endunless
                    <a class="btn btn-mini btn-primary btn-edit" href="{{ route('car_balance.container.edit', $container->container_id) }}"><i class="icon icon-edit"></i> Edit container details</a>
                    @if($content_count == 0)
                        <a class="btn btn-mini btn-danger btn-remove-car" href="{{ route('car_balance.container.delete', $container->container_id) }}"><i class="icon icon-remove"></i> Delete this container</a>
                    @else
                        <a class="btn btn-mini btn-primary btn-details" href="{{ route('car_balance.container.detail', $container->container_id) }}"><i class="icon icon-zoom-in"></i> Show container car details</a>
                    @endif
                    @if ($container->memo) <br> {{ $container->memo }} @endif
                </th>
                <td>{{ $content_count ? $container_contents[$container->container_id][0][0] : '' }}&nbsp;
                    {{ $content_count ? $container_contents[$container->container_id][0][1] : '' }}&nbsp;
                    {{ $content_count ? $container_contents[$container->container_id][0][2] : '' }}
                </td>
                <td>
                    @if($container->settlement_flag != 1 && $content_count > 0)
                    <a class="btn btn-mini btn-danger btn-remove-car" href="{{ route('car_balance.container.removeCar', $container->container_id) }}?chassis_no={{ $container_contents[$container->container_id][0][2] }}"><i class="icon icon-remove"></i> Remove from container</a>
                    <!--<a class="btn btn-mini btn-info" href="#"><i class="icon icon-move"></i> Move to other container</a>-->
                    @endif
                    &nbsp;
                </td>
            </tr>
            @elseif ($content_count)
            <tr>
                <th rowspan="{{ $content_count > 0 ? $content_count : 1 }}">{{ $container->container_id }}</th>
                <th rowspan="{{ $content_count > 0 ? $content_count : 1 }}">
                    <a class="btn btn-mini btn-primary btn-details" href="{{ route('car_balance.container.detail', $container->container_id) }}"><i class="icon icon-zoom-in"></i> Show container car details</a>
                </th>
                <td>{{ $content_count ? $container_contents[$container->container_id][0][0] : '' }}&nbsp;
                    {{ $content_count ? $container_contents[$container->container_id][0][1] : '' }}&nbsp;
                    {{ $content_count ? $container_contents[$container->container_id][0][2] : '' }}
                </td>
                <td>
                    @if($container->settlement_flag != 1 && $content_count > 0)
                    <a class="btn btn-mini btn-danger btn-remove-car" href="{{ route('car_balance.container.removeCar', $container->container_id) }}?chassis_no={{ $container_contents[$container->container_id][0][2] }}"><i class="icon icon-remove"></i> Remove from container</a>
                    <!--<a class="btn btn-mini btn-info" href="#"><i class="icon icon-move"></i> Move to other container</a>-->
                    @endif
                    &nbsp;
                </td>
            </tr>
            @endif
            @if ($content_count)
                @for($i=1;$i<$content_count;$i++)
                    <tr>
                        <td>{{ $container_contents[$container->container_id][$i][0] }}&nbsp;
                            {{ $container_contents[$container->container_id][$i][1] }}&nbsp;
                            {{ $container_contents[$container->container_id][$i][2] }}
                        </td>
                        <td>
                            @unless ($container->settlement_flag)
                            <a class="btn btn-mini btn-danger btn-remove-car" href="{{ route('car_balance.container.removeCar', $container->container_id) }}?chassis_no={{ $container_contents[$container->container_id][$i][2] }}"><i class="icon icon-remove"></i> Remove from container</a>
                            <!--<a class="btn btn-mini btn-info" href="#"><i class="icon icon-move"></i> Move to other container</a>-->
                            @endunless
                        </td></tr>
                @endfor
            @endif
            @endforeach
            </tbody>
        </table>

@include('nimo/domains/car_balance/page')

@else
    Хайлтад тохирох үр дүн алга
@endif

@stop


@section('pagestyles')
<link rel="stylesheet" type="text/css" href={{ asset('assets/chosen-bootstrap/chosen.min.css') }} />
<link rel="stylesheet" type="text/css" href={{ asset('assets/bootstrap-daterangepicker/daterangepicker.css') }} />
<style type="text/css" media="screen">
    .container-wrapper {
        /* Attach fixed-th-table to this container,
           in order to layout fixed-th-table
           in the same way as scolled-td-table" */
        position: relative;

        /* Truncate fixed-th-table */
        overflow: hidden;
        width: 1170px;
        white-space: nowrap;
    }
    table thead td {
        font-weight: bold;
    }
    table tbody th {
        font-weight: normal !important;
    }

    .fixed-th-table-wrapper td,
    .fixed-th-table-wrapper th,
    .scrolled-td-table-wrapper td,
    .scrolled-td-table-wrapper th {
        /* Set background to non-transparent color
           because two tables are one above another.
         */
        background: white;
    }
    .fixed-th-table-wrapper {
        /* Make table out of flow */
        position: absolute;
    }
    .fixed-th-table-wrapper th {
        /* Place fixed-th-table th-cells above
           scrolled-td-table td-cells.
         */
        position: relative;
        z-index: 1;
    }
    .scrolled-td-table-wrapper td {
        /* Place scrolled-td-table td-cells
           above fixed-th-table.
         */
        position: relative;
    }
    .scrolled-td-table-wrapper {
        /* Make horizonal scrollbar if needed */
        overflow-x: scroll;
    }

</style>

<!-- Modal -->
<div id="editModal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <form method="post" action="">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3>Edit container details</h3>
        </div>
        <div class="modal-body"></div>
        <div class="modal-footer">
            <a class="btn btn-primary btn-save" href="#">Save</a>
            <a class="btn btn-cancel" href="#" onclick="$('#editModal').modal('hide')">Cancel</a>
        </div>
    </form>
</div>

<!-- Detail Modal -->
<div id="detailModal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width: 800px;">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Container car details</h3>
    </div>
    <div class="modal-body"></div>
</div>
@stop

@section('pagescripts')
<!--page specific plugin scripts-->
<script type="text/javascript" src={{ asset('assets/chosen-bootstrap/chosen.jquery.min.js') }}></script>
<script type="text/javascript" src={{ asset('assets/bootstrap-daterangepicker/date.js') }} ></script>
<script type="text/javascript" src={{ asset('assets/bootstrap-daterangepicker/daterangepicker.js') }}></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.btn-edit').on('click', function(e){
            e.preventDefault();
            $('#editModal').modal('show')
            $('#editModal .modal-body').html('Loading...');
            $('#editModal form').attr('action',$(this).attr('href'));
            $.get($(this).attr('href'), function(d){
                $('#editModal .modal-body').html(d);
            });
        });
        $('.btn-save').on('click', function(e){
            e.preventDefault();
            $.post($('#editModal form').attr('action'), $('#editModal form').serialize(), function(d){
                $('#notification').html('<div class="alert '+(d.status=='success'?'alert-success':'alert-error')+'">'+ d.message+'</div>')
                $('#editModal').modal('hide')
            })
        });
        $('.btn-settle').on('click', function(e){
            e.preventDefault();
            var $that = this;
            $.get($(this).attr('href'), function(d){
                $('#notification').html('<div class="alert '+(d.status=='success'?'alert-success':'alert-error')+'">'+ d.message+'</div>')
                if(d.status == 'success') {
                    location.reload();
                }
            })
        });
        $('.btn-remove-car').on('click', function(e){
            e.preventDefault();
            if(confirm('Are you sure?')) {
                $.get($(this).attr('href'), function(d){
                    $('#notification').html('<div class="alert '+(d.status=='success'?'alert-success':'alert-error')+'">'+ d.message+'</div>')
                    if(d.status == 'success') {
                        location.reload();
                    }
                })
            }
        });

        $('.btn-details').on('click', function(e){
            e.preventDefault();
            $('#detailModal').modal('show')
            $('#detailModal .modal-body').html('Loading...');
            $('#detailModal form').attr('action',$(this).attr('href'));
            $.get($(this).attr('href'), function(d){
                $('#detailModal .modal-body').html(d);
            });
        });
    });
</script>
@stop